<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t('menu.M_0') }}
    </PageTitle>
    <div class="flex gap-6">
      <!-- welcome -->
      <div class="dashboardCard" style="background-color: #003a8c; color: white">
        <div class="leftCard">
          <p class="topContent" style="color: white">
            {{ $t('dashboard.welcome_back') }}
          </p>
          <p class="bottomContent" style="color: white">
            {{ $t('operator.account_administrator') }}
          </p>
        </div>
        <div class="img"></div>
      </div>
      <div class="dashboardCard">
        <div class="leftCard">
          <p class="topContent">
            {{ $t('dashboard.number_of_new_operators') }}
          </p>
          <p class="bottomContent">{{ totalOperator }}</p>
        </div>
        <div class="img"></div>
      </div>
      <div class="dashboardCard">
        <div class="leftCard">
          <p class="topContent">
            {{ $t('dashboard.operators_7') }}
          </p>
          <p class="bottomContent">{{ activityOperator }}</p>
        </div>
        <div class="img"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { isAuth } from '@/utils'
import { timeFilter, dateFilter } from '@/filters/index'
import PageTitle from '@/components/PageTitle/index.vue'
import { getActivityOperator, getTotalOperator } from '@/api/dashboard'
export default {
  components: {
    PageTitle
  },
  data() {
    return {
      activityOperator: 0,
      totalOperator: 0
    }
  },
  mounted() {
    this.getTotalOperator()
    this.getActivityOperator()
  },
  methods: {
    timeFilter,
    dateFilter,
    isAuth,
    getActivityOperator() {
      // 获取当前时间的时间戳（毫秒）
      const now = Date.now()

      // 计算 7 天前的时间戳（毫秒）
      const sevenDaysAgo = now - 7 * 24 * 60 * 60 * 1000

      // 将时间戳转换为秒
      const startTime = Math.floor(sevenDaysAgo / 1000)
      const endTime = Math.floor(now / 1000)
      getActivityOperator('OPERATOR', {
        startTime,
        endTime
      })
        .then((res) => {
          this.activityOperator = res
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    getTotalOperator() {
      getTotalOperator('OPERATOR')
        .then((res) => {
          this.totalOperator = res
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    }
  }
}
</script>
<style lang="scss" scope>
.dashboardCard {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;
  background-color: white;
}
.leftCard {
  width: 70%;
  padding-left: 32px;
}
.topContent {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #8e95a9;
}
.bottomContent {
  font-size: 24px;
  font-weight: 600;
  line-height: 40px;
  color: #1c2a53;
}
.img {
  width: 100%;
  height: 120px;
  background-image: url('@/assets/images/dashboard/welcome-back-user.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
}
</style>
